<template>
  <el-dialog
    title="上传文件"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="visible"   append-to-body>
    <el-upload
      drag
      :action="url"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      multiple
      :file-list="fileList"
      style="text-align: center;">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只支持jpg、png、gif、doc、xls格式的图片！</div>
    </el-upload>
  </el-dialog>
</template>

<script>
  import API from '@/api'
  export default {
    data () {
      return {
        visible: false,
        url: '',
        ddd: '',
        num: 0,
        successNum: 0,
        fileList: []
      }
    },
    methods: {
      init (id) {
        this.fileList = []
        this.url = API.oss.upload(this.$cookie.get('token'))
        this.visible = true
      },
      // 上传之前
      beforeUploadHandle (file) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const extension = testmsg === 'xls'
        const extension2 = testmsg === 'xlsx'
        const extensio3 = testmsg === 'jpg'
        const extension4 = testmsg === 'png'
        const extension5 = testmsg === 'gif'
        const extension6 = testmsg === 'doc'
        const extension7 = testmsg === 'docx'
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!extension && !extension2 && !extensio3 && !extension4 && !extension5 && !extension6 && !extension7) {
          this.$message.error('只支持jpg、png、gif、doc、xls格式的图片！')
          return false
        }
        if (!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          })
          return false
        }
        this.num++
      },
      // 上传成功
      successHandle (response, file, fileList) {
        this.dd = response.url
        console.log(response)
      },
      // 弹窗关闭时
      closeHandle () {
        this.$emit('refreshDataList', this.dd)
      }
    }
  }
</script>
